<template>
  <el-tabs type="border-card">
    <el-tab-pane label="检测项">
      <el-row style="margin: 0px 10px;padding: 0px 10px">
        <el-col :span="24">
          <el-button-group>
            <el-button @click="toAdd" type="primary" style="margin-right: 20px">新增</el-button>
            <el-button @click="toEdits" type="success" style="margin-right: 20px">修改</el-button>
            <el-button @click="toDeletes" type="danger" style="margin-right: 20px">删除</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-table :data="newDetect" border stripe ref="detectTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="detectName" label="检测项名称"/>
        <el-table-column prop="detectType" label="检测项类型"/>
        <el-table-column prop="detectTool" label="检测工具"/>
        <el-table-column prop="detectMethod" label="检测方法"/>
        <el-table-column prop="detectStandardValue" label="标准值"/>
        <el-table-column prop="detectUnit" label="单位"/>
        <el-table-column prop="detectErrorUp" label="误差上限"/>
        <el-table-column prop="detectErrorLow" label="误差下限"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link @click="toEdit(scope.row.detectId)" style="margin: 0px 5px"
                     type="primary">
              <el-icon>
                <EditPen/>
              </el-icon>
              修改
            </el-link>
            <el-link @click="toDelete(scope.row.detectId)" style="margin: 0px 5px"
                     type="primary">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="物料产品"></el-tab-pane>
  </el-tabs>
  <!--    编辑回显框-->
  <el-dialog
      v-model="ModelDetectionWinDialogVisible"
      title="修改检测模板-检测项"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newModelDetection" label-width="auto">

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测项名称">
              <el-input v-model="newModelDetection.detectName"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测工具">
              <el-input v-model="newModelDetection.detectTool"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="标准值">
              <el-input v-model="newModelDetection.detectStandardValue"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位">
              <el-input v-model="newModelDetection.detectUnit"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="误差上限">
              <el-input-number v-model="newModelDetection.detectErrorUp" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="误差下限">
              <el-input-number v-model="newModelDetection.detectErrorLow"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="cancelnewModel">取消</el-button>
        <el-button type="primary" @click="newModelDetectionSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--    新增框-->
  <el-dialog
      v-model="AddModelDetectionWinDialogVisible"
      title="添加检测模板-检测项"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newModelDetectionAdd" label-width="auto">

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测项名称">
              <el-input v-model="newModelDetectionAdd.detectName"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测工具">
              <el-input v-model="newModelDetectionAdd.detectTool"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="标准值">
              <el-input v-model="newModelDetectionAdd.detectStandardValue"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位">
              <el-input v-model="newModelDetectionAdd.detectUnit"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="误差上限">
              <el-input-number v-model="newModelDetectionAdd.detectErrorUp" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="误差下限">
              <el-input-number v-model="newModelDetectionAdd.detectErrorLow"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="cancelnewModelAdd">取消</el-button>
        <el-button type="primary" @click="newModelDetectionSubmitAdd">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'
import loginRequest from "@/api/login.js";
import {ElMessage, ElMessageBox} from "element-plus";
import qualityRequest from "@/api/quality.js";
import ModelDetail from "@/views/quality control/common defects/detect_model/model-detail.vue";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete', 'cancelEdit'])
// 弹窗标记
let ModelDetectionWinDialogVisible = ref(false);
let AddModelDetectionWinDialogVisible = ref(false);
let props = defineProps(["isShow", "detectId"]);
// 编辑的项目对象
let newDetect = ref([])
let detectTable = ref(null)
//绑定编辑信息
let newModelDetection=ref({})
//绑定新增信息
let newModelDetectionAdd=ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
// const editorRef = shallowRef()
// // 组件销毁时，也及时销毁编辑器
// onBeforeUnmount(() => {
//   const editor = editorRef.value
//   if (editor == null) return
//   editor.destroy()
// })
function toDelete(detectId){
  ElMessageBox.confirm(
      "你确定要删除删除吗?",
      "warning", {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {

    qualityRequest.deleteModelDetectionById(detectId, res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "成功删除"
        })
        loadModelDetectList();
      } else {
        ElMessage({
          type: "warning",
          message: "删除失败"
        })
      }
    });
  }).catch(() => {
  });
}
function toEdit(detectId){
  ModelDetectionWinDialogVisible.value = true;
  // console.log("detect.value.detectId的值为:"+detect.value.detectId)
  getModelDetectById(detectId)
}
/**
 * 新增按钮事件
 */
function toAdd(){
  AddModelDetectionWinDialogVisible.value = true;
}
/**
 * 取消编辑按钮事件
 */
function cancelnewModel() {
  newDetect = ref({});
  ModelDetectionWinDialogVisible.value = false;
}
/**
 * 取消新增按钮事件
 */
function cancelnewModelAdd() {
  // newDetect = ref({});
  AddModelDetectionWinDialogVisible.value = false;
}
/**
 * 编辑提交事件
 */
function newModelDetectionSubmit(){
  // console.log("newModelDetection.value"+newModelDetection.value)
  qualityRequest.updateDetectionById(newModelDetectionAdd.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      // 关闭弹窗

    } else {
      ElMessage({
        type: "warning",
        message: "编辑失败"
      });
    }
  })
}
function newModelDetectionSubmitAdd(){
qualityRequest.insertNewModelDetection(newModelDetectionAdd.value, res => {
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    // 关闭弹窗
    AddModelDetectionWinDialogVisible.value=false
  } else {
    ElMessage({
      type: "warning",
      message: "添加失败"
    });
  }
})
}
/**
 * 关闭窗体前的回调函数
 */
function handleClose() {
  emits("cancelEdit")
}



/**
 * 通过modelId加载任务信息
 * @param modelId
 */
function loadModelDetectList() {
  qualityRequest.loadModelDetectList( res => {
    if (res.data) {
      // editTask.value = res.data;
      newDetect.value = res.data;
    }
  });
}
function getModelDetectById(detectId){
  qualityRequest.getModelDetectById(detectId, res => {
    if (res.data) {
      // editTask.value = res.data;
      newModelDetection.value = res.data;
    }
  });
}

/**
 * 侦听器 侦听 props.isShow
 */
// watch(() => props.isShow, () => {
//   loadModelDetectList()
//   // ModelDetailWinDialogVisible.value = props.isShow
// });
onMounted(()=>{
  loadModelDetectList()
})
</script>
<style scoped>

</style>